<template>
	<view>
		<nav-bar  :title="title" :scrollTop="scrollTop" fontColor="rgb(96, 98, 102)"
			transparentFixedFontColor="rgba(96, 98, 102)">
			<view  @tap="goback" slot="left" style="padding-left: 15px;">
				<u-icon name="arrow-left" :size="45"></u-icon>
			</view>
			<view @tap="goback" slot="transparentFixedLeft" style="padding-left: 15px;color:rgb(96, 98, 102);">
				<u-icon name="arrow-left" :size="45"></u-icon>
			</view>
		</nav-bar>
		<!-- <view class="status_bar axin-bg-white" style="padding: 20rpx;">
			<view class="axin-text-center">
				<text style="font-weight: bold;font-size: 40rpx;margin-right:10rpx;"></text>
			</view>
		</view>
		<view class="wrap" style="margin-top:10px;margin-left: 20rpx;">
		</view> -->

		<mescroll-body-diy height="470px" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
			@up="upCallback"> 
			<vertical-list :book="book"></vertical-list>
		</mescroll-body-diy>
	</view>
</template>

<script>  
	  
	export default { 
		data() {
			return {
				title: '',
				scrollTop: 0,
				downOption: {
					auto: false,
					offset: 50
				},
				upOption: {
					auto: true,
					use: false,
					isBounce: true,
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: null,
						tip: "暂无相关数据",
						btnText: "",
						fixed: false,
						top: "100rpx",
						zIndex: 99
					}
				},
			 
			book: {
				 
			    showHead:false,
				list: [{
						"name": "仙武帝尊",
						"desc": "九千年前，仙武帝尊率领百万神将打入太古洪荒，却无一人归来，只有一缕真火遗留世间。九千年后，门派废徒叶辰，被赶出宗门，无以为家，机缘巧合之下偶得真火，再踏仙武之路。这是一个神魔仙佛并立的世界，这是一个诸天万域混乱的年代，叶辰的逆天征途，由此开始。",
						"url": "/static/delimg/1.jpg",
						"author": "作者",
						"state": "连载",
						"number": "12万字",
						"label": "玄幻"
					},
					{
						"name": "仙武帝尊",
						"desc": "九千年前，仙武帝尊率领百万神将打入太古洪荒，却无一人归来，只有一缕真火遗留世间。九千年后，门派废徒叶辰，被赶出宗门，无以为家，机缘巧合之下偶得真火，再踏仙武之路。这是一个神魔仙佛并立的世界，这是一个诸天万域混乱的年代，叶辰的逆天征途，由此开始。",
						"url": "/static/delimg/2.jpg",
						"author": "作者",
						"state": "连载",
						"number": "12万字",
						"label": "玄幻"
					},
					{
						"name": "仙武帝尊",
						"desc": "九千年前，仙武帝尊率领百万神将打入太古洪荒，却无一人归来，只有一缕真火遗留世间。九千年后，门派废徒叶辰，被赶出宗门，无以为家，机缘巧合之下偶得真火，再踏仙武之路。这是一个神魔仙佛并立的世界，这是一个诸天万域混乱的年代，叶辰的逆天征途，由此开始。",
						"url": "/static/delimg/3.jpg",
						"author": "作者",
						"state": "连载",
						"number": "12万字",
						"label": "玄幻"
					},
					{
						"name": "仙武帝尊",
						"desc": "九千年前，仙武帝尊率领百万神将打入太古洪荒，却无一人归来，只有一缕真火遗留世间。九千年后，门派废徒叶辰，被赶出宗门，无以为家，机缘巧合之下偶得真火，再踏仙武之路。这是一个神魔仙佛并立的世界，这是一个诸天万域混乱的年代，叶辰的逆天征途，由此开始。",
						"url": "/static/delimg/4.jpg",
						"author": "作者",
						"state": "连载",
						"number": "12万字",
						"label": "玄幻"
					}, {
						"name": "仙武帝尊",
						"desc": "九千年前，仙武帝尊率领百万神将打入太古洪荒，却无一人归来，只有一缕真火遗留世间。九千年后，门派废徒叶辰，被赶出宗门，无以为家，机缘巧合之下偶得真火，再踏仙武之路。这是一个神魔仙佛并立的世界，这是一个诸天万域混乱的年代，叶辰的逆天征途，由此开始。",
						"url": "/static/delimg/11.jpg",
						"author": "作者",
						"state": "连载",
						"number": "12万字",
						"label": "玄幻"
					},
					{
						"name": "仙武帝尊",
						"desc": "九千年前，仙武帝尊率领百万神将打入太古洪荒，却无一人归来，只有一缕真火遗留世间。九千年后，门派废徒叶辰，被赶出宗门，无以为家，机缘巧合之下偶得真火，再踏仙武之路。这是一个神魔仙佛并立的世界，这是一个诸天万域混乱的年代，叶辰的逆天征途，由此开始。",
						"url": "/static/delimg/12.jpg",
						"author": "作者",
						"state": "连载",
						"number": "12万字",
						"label": "玄幻"
					},
					{
						"name": "仙武帝尊",
						"desc": "九千年前，仙武帝尊率领百万神将打入太古洪荒，却无一人归来，只有一缕真火遗留世间。九千年后，门派废徒叶辰，被赶出宗门，无以为家，机缘巧合之下偶得真火，再踏仙武之路。这是一个神魔仙佛并立的世界，这是一个诸天万域混乱的年代，叶辰的逆天征途，由此开始。",
						"url": "/static/delimg/13.jpg",
						"author": "作者",
						"state": "连载",
						"number": "12万字",
						"label": "玄幻"
					}
				]
			}
			}
		},
		onLoad(e) { 
			this.title = e.title
		},
		methods: {
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				setTimeout(() => {
					this.mescroll.endErr();
				}, 2000);
			},
			/*下拉刷新的回调 */
			downCallback() {
				setTimeout(() => {
					this.mescroll.endSuccess();
				}, 2000);

			},
			gopage: function(e) {
				var url = e.currentTarget.dataset.url;
				console.log(url);
				uni.navigateTo({
					url: url
				})
			},
			goback: function(e) {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped lang="scss">
	 
	.book_list{
		background-color: #fff;
	}
</style>